<template>
  <div class="content-right col-lg-10">
    <div class="box">
      <ul class="imgBox clearfix">
        <li v-for="(item,index) in imgTitle" v-on:click="showList(item.name)">
          <img :src="item.url" alt>
          <span>{{item.name}}</span>
        </li>
      </ul>
      <div class="searchBox clearfix">
        <div class="t_tool">
          <span class="iconfont icon-fenye-diyiye first" v-on:click="firstPage()">&lt;&lt;</span>
          <span class="iconfont icon-fenye-shangyiye pre" v-on:click="prePage()">&lt;</span>
          <span>&nbsp;&nbsp;</span>
          <span class="nowPage">{{pageList.curPage}}</span>
          <span>/</span>
          <span class="allPage">{{pageList.allPage}}</span>
          <span>&nbsp;&nbsp;</span>
          <span>共 {{pageList.allCount}} 张</span>
          <span class="iconfont icon-fenye-xiayiye next" v-on:click="nextPage()">&gt;</span>
          <span class="iconfont icon-fenye-zuihouyiye last" v-on:click="lastPage()">&gt;&gt;</span>

          <input class="toPage" type="text" v-model="pageList.toPageNum" name value="1">
          <button class="toBtn" v-on:click="toPage()">跳转</button>
        </div>
        <div class="searchRight">
          <input type="text" placeholder="按名字查找" v-model="pageList.searchVal" @keyup.enter="getImgListByNameGroup()">
          <button class="search" v-on:click="getImgListByNameGroup()" >查找</button>
        </div>
      </div>
      <div class="imgList" v-on:scroll="ttt()" v-show="listShow">
        <span class="close" v-on:click="close()">X</span>
        <!-- 自己写 -->
        <!-- <ul class="clearfix col-md-9">
          <li>
            <ul>
              <li v-for="item in list1" v-on:click="showImg(item)">
                <img :src="item" alt>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li v-for="item in list2" v-on:click="showImg(item)">
                <img :src="item" alt>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li v-for="item in list3" v-on:click="showImg(item)">
                <img :src="item" alt>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li v-for="item in list4" v-on:click="showImg(item)">
                <img :src="item" alt>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li v-for="item in list5" v-on:click="showImg(item)">
                <img :src="item" alt>
              </li>
            </ul>
          </li>
        </ul>-->
        <!-- vue-waterfall-easy -->
        <!-- <div class="col-md-9 clearfix" style="height:100%">
        </div>-->

        <!-- vue-waterfall2 -->
        <div class="col-md-9 pububox">
          <div>
            <!-- <button @click="loadmore">loadmore</button> -->
            <button @click="switchCol(3)">3列</button>
            <button @click="switchCol(5)">5列</button>
            <button @click="switchCol(7)">7列</button>
          </div>

          <waterfall
            :col="col"
            :width="itemWidth"
            :gutterWidth="gutterWidth"
            :data="water2Data"
            @loadmore="loadmore"
            @scroll="scroll"
          >
            <template>
              <div class="cell-item" v-for="(item, index) in water2Data">
                <span class="del" v-on:click="del(item)">X</span>
                <img
                  v-if="item.src"
                  :src="item.src"
                  alt="加载错误"
                  v-on:click="showImg(index,item.src,$event)"
                >
              </div>
            </template>
          </waterfall>
        </div>

        <div class="info col-md-3">
          <div class="touxiang">
            <img src="../../static/images/hua.jpg" alt>
          </div>
          <div>
            <label for>
              ID：
              <input type="text" v-model="uid" disabled>
            </label>
          </div>
          <div>
            <label for>
              姓名：
              <input type="text" disabled v-model="username">
            </label>
          </div>
          <div>
            <label for>
              性别：
              <input type="text" disabled v-model="gender">
            </label>
          </div>
          <div>
            <label for>
              电话：
              <input type="text" disabled v-model="tel">
            </label>
          </div>
          <div>
            <label for>
              生日：
              <input type="text" disabled v-model="birthday">
            </label>
          </div>
          <div>
            <label for>
              地址：
              <input type="text" disabled v-model="addr">
            </label>
          </div>
        </div>
      </div>

      <div class="showImage" v-show="flag" v-on:click="hide(this)">
        <!-- 半透明遮罩 -->
        <div class="mask"></div>
        <!-- 展示的图片列表 -->
        <div class="imageList">
          <!-- <img v-for="item in imgList" :src="item" alt> -->
          <img v-for="(item,index) in imgList" :src="item" v-on:click="showImg(index)" alt="加载错误">
          <!-- <img :src="imgList[0]" alt=""> -->
        </div>

        <!-- 前进 后退 按钮 -->
        <div class="prev" v-on:click.stop="pre">&lt;</div>
        <div class="nextp" v-on:click.stop="next">&gt;</div>
      </div>
    </div>
  </div>
</template>

<style>
@import "../assets/css/imgList.css";
</style>

<script>
import "../assets/js/vue-waterfall-easy";
import waterfall from "vue-waterfall2";
// Vue.use(waterfall);
export default {
  data() {
    return {
      water2Data: [],
      col: 5,

      delName: "",

      imgsArr: [],
      group: 0, // request param

      flag: true,
      widthV: "100%",
      heightV: "100%",
      listShow: false,
      uid: "",
      tel: "",
      username: "",
      gender: "男",
      birthday: "1900-01-01",
      addr: "",
      showImgSrc: "",
      sizeArr: [0, 0, 0, 0, 0],
      scroNum: 0,
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      pageList: {
        page: 1,
        allCount: 1,
        curPage: 1,
        allPage: 1,
        count: 20,
        searchVal: "",
        toPageNum: 1,
        pageData: {}
      },

      imgTitle: [],
      imgList: [],
      tmpArr: []
    };
  },
  components: {
    vueWaterfallEasy
  },
  computed: {
    itemWidth() {
      return $(".pububox").width / this.col - 20;
    },
    gutterWidth() {
      return 20;
    }
  },
  mounted() {
    this.getImgList();
  },
  methods: {
    scroll(scrollData) {
      // console.log(scrollData);
    },
    switchCol(col) {
      this.col = col;
      console.log(this.col);
    },
    loadmore(index) {
      // this.water2Data = this.water2Data.concat(this.water2Data);
    },
    ttt() {
      var that = this;
      //  是一个具有四个属性left、top、right、bottom的DOMRect对象
      var rec = $(".imgList")[0].getBoundingClientRect();
      // console.log(rec);
      var scroHei = $(".imgList").scrollTop(); //滚动的高度
      // console.log(scroHei);
      let length = that.imgList.length / 30;
      if (scroHei - this.scroNum * 450 > 400) {
        if (this.scroNum > length) {
          return;
        } else {
          this.scroNum++;
          this.pubu(
            that.imgList.slice(30 * this.scroNum, 30 * (this.scroNum + 1)),
            0
          );
        }
      }
    },
    hide(e) {
      console.log("hide");
      console.log("e: ", e);
      // this.flag = false;
      $(".showImage").fadeOut("slow");
    },
    firstPage() {
      this.pageList.curPage = 1;
      this.showImgList(this.pageList.curPage);
    },
    prePage() {
      if (this.pageList.curPage > 1) {
        this.pageList.curPage--;
        this.showImgList(this.pageList.curPage);
      } else {
        alert("已经是第一页了！！！");
        return;
      }
    },
    nextPage() {
      if (this.pageList.curPage < this.pageList.allPage) {
        this.pageList.curPage++;
        this.showImgList(this.pageList.curPage);
      } else {
        alert("已经是最后一页了！！！");
        return;
      }
    },
    lastPage() {
      this.pageList.curPage = this.pageList.allPage;
      this.showImgList(this.pageList.curPage);
    },
    toPage() {
      if (this.pageList.toPageNum > this.pageList.allPage) {
        alert("只有 " + this.pageList.allPage + " 页");
        return;
      } else {
        this.pageList.curPage = this.pageList.toPageNum;
        this.showImgList(this.pageList.curPage);
      }
    },
    pre() {
      console.log("pre");

      if (!$(".imageList").is(":animated")) {
        $(".imageList img:first").animate(
          {
            left: "-100%"
          },
          1000,
          function() {
            //把当前的元素追加到
            $(".imageList").append($(this));
            $(this).animate(
              {
                left: "0px"
              },
              1000
            );
          }
        );

        $(".imageList").animate(
          {
            left: "60%"
          },
          1000
        );
        $(".imageList").animate(
          {
            left: "50%"
          },
          1000
        );
      }
    },
    next() {
      console.log("next");
      if (!$(".imageList").is(":animated")) {
        $(".imageList img:last").animate(
          {
            left: "100%"
          },
          1000,
          function() {
            //把当前的元素放到最底部，插在最前面
            $(".imageList").prepend($(this));
            $(this).animate(
              {
                left: "0px"
              },
              1000
            );
          }
        );
        //整体面板左移
        $(".imageList")
          .animate(
            {
              left: "40%"
            },
            1000
          )
          .animate(
            {
              left: "50%"
            },
            1000
          );
      }
    },
    showImg(index, src, event) {
      console.log(index + " ： " + src);
      // console.log(event.target.src = src);
      // this.showImgSrc = src;
      // $(".imageList>img")
      //   .eq(index)
      //   .attr("src", src);
      $(".showImage").fadeIn("slow");
    },
    showList(name) {
      this.delName = name;
      let that = this;
      var tmpArr = [];
      that.list1 = [];
      that.list2 = [];
      that.list3 = [];
      that.list4 = [];
      that.list5 = [];
      this.listShow = true;
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/getImgListByName",
        method: "post",
        async: false,
        data: {
          name: name
        },
        dataType: "json",
        success: function(res) {
          console.log("showList res: ", res);
          if (res.data.length <= 0) {
            that.listShow = false;
            that.getImgListByNameGroup();
            return;
          }
          tmpArr = [];
          let tmp2Arr = [];
          for (let i = 0; i < res.data.length; i++) {
            tmpArr.push(res.data[i].netaddr);
            let mp2 = {};
            mp2.src = res.data[i].netaddr;
            mp2.uploaddate = res.data[i].uploaddate;
            tmp2Arr.push(mp2);
          }
          that.imgList = tmpArr;
          // that.pubu(tmpArr,0);
          that.water2Data = tmp2Arr;
          that.imgsArr = that.imgsArr.concat(tmp2Arr);
          that.getInfo(res.data[0].tel);
        },
        error: function(err) {
          console.log("err: ", err);
        }
      });
    },
    close() {
      this.listShow = false;
    },
    pubu(data, length) {
      var that = this;
      if (length >= data.length) {
        return;
      } else {
        let src = data[length];
        let index = that.sizeArr.indexOf(Math.min.apply(null, that.sizeArr));
        if (index == 0) {
          that.list1.push(src);
        } else if (index == 1) {
          that.list2.push(src);
        } else if (index == 2) {
          that.list3.push(src);
        } else if (index == 3) {
          that.list4.push(src);
        } else if (index == 4) {
          that.list5.push(src);
        }
        $("<img/>")
          .attr("src", src)
          .on("load", function() {
            let riw = this.width;
            let rih = this.height;
            let uih = ($($(".imgList li")[0]).width() / riw) * rih;
            that.sizeArr[index] = that.sizeArr[index] + uih;
            length = length + 1;
            return that.pubu(data, length);
          });
      }
    },
    getInfo(tel) {
      let that = this;
      $.ajax({
        type: "post",
        url: "http://127.0.0.1:8080/linkMan/linkman/selectByTel",
        dataType: "json",
        data: {
          tel: sessionStorage.getItem("tel")
          // tel:"13111111111"
          // tel:res.data[i]
        },

        success: function(res) {
          console.log("---res: ", res);
          let data = res.data;
          that.uid = data.userid;
          that.tel = data.tel;
          that.username = data.username;
          that.gender = data.gender;
          that.birthday = data.birthday;
          that.addr = data.addr;
        },
        error: function(err) {
          console.log("err: ", err);
        }
      });
    },
    showImgList(page) {
      this.imgTitle = this.tmpArr.slice(
        this.pageList.count * (page - 1),
        this.pageList.count * page
      );
    },
    getImgList() {
      let that = this;
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/getImgListByGroup",
        method: "post",
        data: { search: that.pageList.searchVal },
        dataType: "json",
        success: function(res) {
          console.log("getImgList res: ", res);
          let tmpArr = [];
          for (let i = 0; i < res.data.length; i++) {
            let mp = {};
            mp.url = res.data[i].netaddr;
            mp.name = res.data[i].name;
            tmpArr.push(mp);
          }
          that.tmpArr = tmpArr;
          that.pageList.allCount = tmpArr.length;
          that.pageList.allPage = Math.ceil(
            tmpArr.length / that.pageList.count
          );
          that.showImgList(that.pageList.curPage);
        },
        error: function(err) {
          console.log("err: ", err);
        }
      });
    },
    getImgListByNameGroup() {
      let that = this;
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/getImgListByNameGroup",
        method: "post",
        data: { name: that.pageList.searchVal },
        dataType: "json",
        success: function(res) {
          console.log("getImgList res: ", res);
          let tmpArr = [];
          for (let i = 0; i < res.data.length; i++) {
            let mp = {};
            mp.url = res.data[i].netaddr;
            mp.name = res.data[i].name;
            tmpArr.push(mp);
          }
          that.tmpArr = tmpArr;
          that.pageList.allCount = tmpArr.length;
          that.pageList.allPage = Math.ceil(
            tmpArr.length / that.pageList.count
          );
          that.showImgList(that.pageList.curPage);
        },
        error: function(err) {
          console.log("err: ", err);
        }
      });
    },
    del(item) {
      let that = this;
      console.log(item);
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/delImg",
        method: "post",
        async: false,
        data: {
          url: item.src,
          uploaddate: item.uploaddate
        },
        dataType: "json",
        success: function(res) {
          console.log("res: ", res);
          that.showList(that.delName);
        },
        error: function(err) {
          console.log("err: ", err);
        }
      });
    }
  }
};
</script>
